<!doctype html>

<head>
    <title>Threebox raycaster of Objects3D, 3D models and Fill-extrusions</title>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.min.js"
        type="text/javascript"></script>
    <link href="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.css" rel="stylesheet" />
    <script src="config.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map' class='map'></div>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';


        let origin3 = [-122.3491, 47.6207, 0];

        let minZoom = 12;
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/outdoors-v11',
            center: origin3,
            zoom: 16.5,
            pitch: 60,
            antialias: true,
            heading: 0, hash: true
        });

        // we can add Threebox to mapbox to add built-in mouseover/mouseout and click behaviors
        window.tb = new Threebox(
            map,
            map.getCanvas().getContext('webgl'),
            {
                defaultLights: true,
                enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
                enableSelectingObjects: true, //change this to false to disable 3D objects selection
                enableDraggingObjects: true, //change this to false to disable 3D objects drag & move once selected
                enableRotatingObjects: true, //change this to false to disable 3D objects rotation once selected
                enableTooltips: true, // change this to false to disable default tooltips on fill-extrusion and 3D models
            }
        );
        map.on('style.load', function () {
            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                renderingMode: '3d',
                onAdd: function (map, mbxContext) {
                    var options = {
                        obj: '/data/Soldier.glb',
                        type: 'gltf',
                        scale: 100,
                        units: 'meters',
                        rotation: { x: 90, y: 0, z: 0 }, //default rotation
                        anchor: 'center'
                    }

                    tb.loadObj(options, function (model) {
                        let soldier = model.setCoords(origin3);
                        model.addTooltip("This is a custom tooltip", true);
                        tb.add(soldier);
                        // play animation 3, for 10 seconds
                        soldier.playAnimation(options = { animation: 1, duration: 10000 });

                    })

                },
                render: function (gl, matrix) {
                    tb.update();
                }
            });

        });

    </script>
</body>